<extend name="template/base_index2" />

<block name="area_header">
	<style type="text/css">
	
		
		
		.header{
			background: #FFFFFF;
			margin-bottom: 15px;
		}
		.am-with-topbar-fixed-top {
			padding-top: 39px;
		}
		.logo-wrp{
			position: relative;
			height: 120px;
			padding: 10px 16px;
			font-size: 14px;
			text-shadow: 1px 1px 4px rgba(0,0,0,.6);
			color: #fff;
			padding-top: 16px;
			margin-top: -55px;			
		}
		.logo-wrp .user-logo{
			padding: 10px 11px 0;
		  	float: left;
		}
		.user-logo img{
			height: 56px;
		  	width: 56px;
		  	border-radius: 50%;
  			-webkit-border-radius: 50%;
		  	border: 1px solid #EFDAE5;
		}	
		.logo-wrp .logo-circle{			
			background: url() no-repeat;
			background-size: contain;
			width: 78px;
			height: 36px;
			position: absolute;
			left: 20px;
			top: 20px;
			padding-top: 90px;
			font-size: 16px;
			color: #fff;
		}
		.logo-wrp .username{
			padding-top: 15px;
		}
		.logo-wrp .logo-rank{
			position: absolute;
			text-align: center;
			font-size: 10px;
			margin-left: 7px;
		}
		.quick-menu{
			height: 100%;
			font-size: 12px;
		}
		.quick-menu .am-list{
			margin-bottom: 12px;
		}
		.quick-menu .am-list>li>a{
			padding: 5px 10px;
  			-webkit-tap-highlight-color: rgba(240,240,240,0.7);
  			color: #E5428C;
  			height: 40px;
 			line-height: 30px;
  			font-size: 14px;
			
		}
		.quick-menu .am-list>li>a:visited{
			color: #E5428C;
		}
		
		.quick-menu .am-list>li>a>i.icon{
			margin-right: 8px;
		}
		
		.header{
			font-size: 16px;
		}
		.header .am-topbar{
			font-size: 18px;
  			padding: 5px 16px;
  			min-height: 20px;
  			margin-bottom: 0px;
		}
		.user-banner{
			background-size: contain;
			text-align: right;
			background:url(__IMG__/user-banner/bg.jpg?v=1.0) repeat;
			height: 90px;
		}
		.user-banner img{
			height: 90px;
		}
		.rank{
			width: 100%;
		    vertical-align: middle;
		    margin-left: 5px;
		}
		.rank i{
			width:16px ;
			height: 16px;
		    display: inline-block;
		 }
		.rank-1{
			background: url(__IMG__/rank/1.gif) no-repeat;
		}
		.rank-2{
			background: url(__IMG__/rank/2.gif) no-repeat;
		}
		.rank-3{
			background: url(__IMG__/rank/3.gif) no-repeat;
		}
		.rank-100{
			background: url(__IMG__/rank/100.gif) no-repeat;
		}
		.mb-os{
			
		  height: 90px;
		  width: 100%;
		  color: #333333;
		  padding-left: 70px;
		}
		.mb-os ul{
			list-style-type: none;
			width:100%;
			margin-top: 10px;
		}
		.mb-os ul li{
			float:left;		
  			text-align: center;
  			position: relative;
  			font-size: 10px;
  			margin:0px 5px;
  			width: 20%;
  			height: 100%;
  			line-height: 1.6;
		}
		.mb-os ul li a{
			padding-top: 14px;
			height: 46px;
			color: #666;
			text-shadow: none;
		}
		.mb-os ul li:after{
			content: ' ';
			position: absolute;
			top: 22px;
			right: -1px;
			height: 14px;
			border-right: 1px #ddd solid;
		}
	</style>
</block>

<block name="area_body">
	<div class="header">
		<div class="am-topbar am-topbar-default am-topbar-fixed-top">我的资料</div>
		<div class="user-banner">
			<img class="am-responsive-width" src="__IMG__/user-banner/banner.jpg" alt="banner" />
		</div>
		<div class="logo-wrp" >
			<div class="user-logo am-inline-block">
				<img class="" src="{$userinfo.avatar}" alt="logo" />
				<span class="logo-circle"></span>
				<span class="logo-rank">V{$rank['loop']}会员</span>
			</div>
			<div class="username">
			<span >{$userinfo.nickname}</span>			
			<span class="rank">
				<for start="0" end="$rank['loop']">
					<i class="rank rank-{$rank['type']}"></i>
				</for>
			</span>
			</div>
			<div class="mb-os">
				<ul class="am-cf">
					<li><a href="{:U('Shop/User/order',array('datatype'=>1))}">{$tobepaid}<br/>待付款</a></li>
					<li><a href="{:U('Shop/User/order',array('datatype'=>2))}">{$tobeshipped}<br/>待发货</a></li>
					<li><a href="{:U('Shop/User/order',array('datatype'=>3))}">{$tobereceipt}<br/>待收货</a></li>
					<li><a href="{:U('Shop/User/order',array('datatype'=>4))}">{$tobeeval}<br/>待评价</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="quick-menu">
		<ul class="am-list goto-order">
		  <li class="am-cf"><a href="{:U('Shop/User/order')}"><i class="icon am-icon-reorder"></i>我的订单<i class="am-fr am-icon-chevron-right"></i></a> </li>
		</ul>
		
		
		<ul class="am-list suggest">
		  <li class="am-cf"><a href="{:U('Shop/Suggest/add')}"><i class="icon am-icon-question-circle"></i>帮助与反馈<i class="am-fr am-icon-chevron-right"></i></a> </li>
		</ul>
	</div>
	
	
</block>

<block name="area_footer">
	<include file="partial/footermenu" />
</block>

